<template>
  <div class="all"  >
    <header>
      <div class="div" @click="back">
<!--        <img src="../../assets/返回.png" alt="">-->
        <span class="side" style="margin-left: 15px">上一步</span>
      </div>
      <div class="div">
        <span>选择评定量表</span>
      </div>
      <div class="div">
        <span class="side" @click="next">下一步</span>
      </div>
    </header>
    <div class="menu">
      <el-steps :active="menuIndex" align-center>
        <el-step title="" v-for="(item, index) in  menuList" :key="index"
                 @click.native="changeMenu(index, url)"
                 process-status="success"
                 :description="item.title">
          <template #icon>
            <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
              <img src="../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
            </div>
            <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
              <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
    <div class="peopletitle" >
      <img :src="peopleList.PHOTO" v-if="peopleList.PHOTO !== null && peopleList.PHOTO !== undefined && peopleList.PHOTO !== ''" alt="">
      <img v-else src="../../assets/photo.png" alt="">
      <span>{{peopleList.name}}</span>
      <span>|</span>
      <span v-show="peopleList.SEX == 1 || peopleList.sex == 1">男</span>
      <span v-show="peopleList.SEX == 2 || peopleList.sex == 2">女</span>
      <span>|</span>
      <span>{{peopleList.age}} 岁</span>
    </div>
    <div class="tabs">
      <ul>
        <li :class="[index === 0 ? 'select' : '']" @click="clickTab(0)">推荐量表</li>
        <li :class="[index === 1 ? 'select' : '']" @click="clickTab(1)">自选量表</li>
      </ul>
    </div>
    <div class="search">
      <van-search
        class="popSearch"
        v-model="name"
        show-action
        placeholder="请搜索评定量表"
        left-icon=""
        right-icon=""
        shape="round"
        @input="onPoPSearch"
        @blur.prevent="inputLoseFocus"
      >
        <template #left-icon>
          <van-icon name="search" />
        </template>
        <template #action>
<!--          <div @click="onPoPSearch" class="sousuo">搜索</div>-->
        </template>
      </van-search>
    </div>
    <div class="content" :class="selectList.length > 0 ? 'contentSelectDiv' : ''" v-show="index === 0" >
      <div  style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center" v-show="isLoading">
        <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
      </div>
      <ul v-for="(item, index) in tjList" v-show="tjList.length > 0" :key="index" @click="selTitle(index, item, tjList, item.tabTitle)">
        <li><img src="../../assets/题目@2x.png" alt=""></li>
        <li>
          <p style="margin-bottom: 1vw;">{{item.ASSESS_NAME}}</p>
          <p>({{item.COUNT}}题)</p>
        </li>
        <li>
          <img v-if="item.select === true"
               class="subjectSel"
               src="../../assets/题目选择.png" alt="">
          <img  v-else
                class="subjectSel"
                src="../../assets/题目未选择.png" alt="">
        </li>
      </ul>
      <van-empty
        v-show="tjList.length <= 0 && isLoading === false"
        class="custom-image"
        :image="require('../../assets/暂无数据.png')"
        description="暂无推荐量表"
      />
    </div>
    <div class="content" :class="selectList.length > 0 ? 'contentSelectDiv' : ''" v-show="index === 1" >
      <div  style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center" v-show="isLoading">
        <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
      </div>
      <van-empty
        v-show="zxList.length<=0 && isLoading === false"
        class="custom-image"
        :image="require('../../assets/暂无数据.png')"
        description="暂无自选量表"
      />
      <ul v-for="(item, index) in zxList" :key="index" @click="selTitle(index, item, zxList, item.tabTitle)">
        <li><img src="../../assets/题目@2x.png" alt=""></li>
        <li>
          <p style="margin-bottom: 1vw;">{{item.ASSESS_NAME}}</p>
          <p>({{item.COUNT}}题)</p>
        </li>
        <li>
          <img v-if="item.select === true"
               class="subjectSel"
               src="../../assets/题目选择.png" alt="">
          <img  v-else
                class="subjectSel"
                src="../../assets/题目未选择.png" alt="">
        </li>
      </ul>
    </div>
    <div class="selectContent" v-show="selectList.length > 0">
      <div class="seleHeader">
        <a></a>
        <span>已选择量表</span>
      </div>
      <ul v-for="(item, index) in selectList" :key="index">
        <li><img src="../../assets/题目@2x.png" alt=""></li>
        <li>
          <p style="margin-bottom: 1vw;">{{item.ASSESS_NAME}}</p>
          <p>({{item.COUNT}}题)  <span style="color: #1da4f2;margin-left: 5px">{{item.tabTitle}}</span></p>
        </li>
        <li @click="selectdel(item, item.tabTitle)">
          <img style="width: 16px;height: 16px" src="../../assets/删除灰色@2x.png" alt="">
        </li>
      </ul>
      <van-empty
        style="width: 100%;height: 70%;"
        v-show="selectList.length <= 0"
        class="empty"
        :image="require('../../assets/暂无数据.png')"
        description="暂无已选择量表"
      />
      <van-dialog v-model="show"
                  width="55%"
                  :title="title"
                  @confirm="onConfirm()"
                  confirmButtonColor="#1da4f2"
                  show-cancel-button>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'SelectionAssessment',
  data () {
    return {
      index: 0,
      type: 0,
      assessid: 0,
      tjList: [],
      zxList: [],
      selectList: [],
      name: '',
      show: false,
      title: '',
      ACCEPT_USER_ID: '',
      isLoading: true,
      menuIndex: 3,
      menuList: [
        {
          title: '选择人员',
          url: '/selectAssessor'
        },
        {
          title: '信息录入',
          url: '/enterPingGu'
        },
        {
          title: '选择类型',
          url: '/assessmentType'
        },
        {
          title: '选择量表',
          url: '/selectionAssessment'
        },
        {
          title: '量表填写',
          url: '/assessmentScale'
        }
      ],
      peopleList: []
    }
  },
  mounted () {
    if (window.sessionStorage.getItem('selData') !== null && window.sessionStorage.getItem('selData') !== undefined) {
      this.selectList = JSON.parse(window.sessionStorage.getItem('selData'))
    }
    // 从网址上截取 type 后面的值
    this.type = this.$utils.getUrlKey('type')
    this.assessid = this.$utils.getUrlKey('assessid')
    if (window.sessionStorage.getItem('ACCEPT_USER_ID') !== null && window.sessionStorage.getItem('ACCEPT_USER_ID') !== undefined) {
      this.ACCEPT_USER_ID = window.sessionStorage.getItem('ACCEPT_USER_ID')
    }
    if (this.selectList.length <= 0) {
      $('.content').css('height', $(window).height() - $('.content').offset().top - 60 + 'px')
    }

    // 获取所有数据
    this.getlist()

    this.ACCEPT_USER_ID = sessionStorage.getItem('ACCEPT_USER_ID')
    // 获取个人基本信息
    this.getPerson()
  },
  computed: {
  },
  methods: {
    // 获取个人基本信息
    getPerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.ACCEPT_USER_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
            console.log(this.peopleList)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题
    inputLoseFocus () {
      setTimeout(() => {
        window.scrollTo(0, 0)
        $('.selectContent').css('height', $(window).height() - $('.selectContent').offset().top - 50 + 'px')
      }, 100)
    },
    // 点击返回
    back () {
      // 返回上一页
      this.$router.go(-1)
    },
    // 获取所有列表下
    getlist () {
      this.isLoading = true
      var diagnose
      if (sessionStorage.getItem('diagnose') === null) {
        diagnose = ''
      } else {
        diagnose = sessionStorage.getItem('diagnose')
      }
      this.$http.list({
        TYPE: this.type, // 评估类型 1:自我评估;2:医生评估;3:残疾人评估
        name: this.name, // 搜素框
        assess_self_type: this.assessid, // 字典类型:自我评估类型(assess_self_type)
        ACCEPT_USER_ID: this.ACCEPT_USER_ID,
        diagnose: diagnose
      }) // 被评估人ID
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            var list = this.selectList
            res.data.data.tjlist.forEach(function (currentValue, index, arr) {
              if (list.length > 0) {
                list.forEach(function (item, ind, add) {
                  if (item.ASSESS_NAME === currentValue.ASSESS_NAME) {
                    arr[index].tabTitle = '推荐'
                    arr[index].select = true
                  } else {
                    arr[index].tabTitle = '推荐'
                    // arr[index].select = false
                  }
                })
              } else {
                arr[index].tabTitle = '推荐'
                arr[index].select = false
              }
            })
            this.tjList = res.data.data.tjlist
            // console.log(this.tjList)
            res.data.data.zxlist.forEach(function (currentValue, index, arr) {
              if (list.length > 0) {
                list.forEach(function (item, ind, add) {
                  // console.log(item)
                  if (item.ASSESS_NAME === currentValue.ASSESS_NAME) {
                    arr[index].tabTitle = '自选'
                    arr[index].select = true
                  } else {
                    arr[index].tabTitle = '自选'
                    // arr[index].select = false
                  }
                })
              } else {
                arr[index].tabTitle = '自选'
                arr[index].select = false
              }
            })
            this.zxList = res.data.data.zxlist
            // console.log(this.zxList)
            // 切换推荐量表或者自选量表
            if (this.tjList.length > 0) {
              this.clickTab(0)
            } else {
              this.clickTab(1)
            }
            this.isLoading = false
            $('.selectContent').css('height', $(window).height() - $('.selectContent').offset().top - 50 + 'px')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 下一步
    next () {
      if (this.selectList.length > 0) {
        window.sessionStorage['selData'] = JSON.stringify(this.selectList)
        this.$router.push({path: '/assessmentScale', query: {type: this.type, assessid: this.assessid}})
      } else {
        Toast('请选择评定量表哦')
      }
    },
    // 切换推荐量表或者自选量表
    clickTab (index) {
      this.index = index
    },
    //  选择表
    selTitle (index, item, arr, tabName) {
      window.sessionStorage.removeItem('selData')
      if (item.select === true) {
        arr[index].select = false
        this.selectdel(item, tabName)
        // Toast('不可重复选择')
      } else {
        arr[index].select = true
        this.selectList.unshift(item)
        $('.selectContent').css('height', $(window).height() - $('.selectContent').offset().top - 50 + 'px')
      }
    },
    // 选择删除
    selectdel (item, tabName) {
      var _this = this
      console.log(this.selectList)
      this.selectList.forEach(function (currentValue, index, arr) {
        if (currentValue.ASSESS_NAME === item.ASSESS_NAME) {
          if (tabName === '推荐') {
            _this.tjList.forEach(function (tjCurrent, tjIndex, tjArr) {
              if (tjCurrent.ASSESS_NAME === item.ASSESS_NAME) {
                tjCurrent.select = false
              }
            })
          } else if (tabName === '自选') {
            _this.zxList.forEach(function (czxCurrent, zxIndex, zxArr) {
              if (czxCurrent.ASSESS_NAME === item.ASSESS_NAME) {
                czxCurrent.select = false
              }
            })
          }
          arr.splice(index, 1)
        }
      })
      console.log(this.selectList)
      if (this.selectList.length <= 0) {
        $('.content').css('height', $(window).height() - $('.content').offset().top - 60 + 'px')
      }
      // this.zxList.forEach(function (currentValue, index, arr) {
      //   if (currentValue === item) {
      //     arr[index].select = false
      //   }
      // })
      // this.title = '确认删除”' + item.ASSESS_NAME + '”表吗？'
      // this.show = true
    },
    // 确定删除已选题目
    onConfirm () {
    },
    // 评估表名 的 搜索事件
    onPoPSearch () {
      this.getlist()
    }
  },
  destroyed () {
    window.onresize = null
  }
}
</script>

<style scoped>
  /deep/ .custom-image{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /*/deep/ .custom-image .van-empty__image,*/
  /*/deep/ .empty .van-empty__image*/
  /*{*/
  /*  width: 90px;*/
  /*  height: 90px;*/
  /*  margin-top: 30px;*/
  /*}*/
  /deep/ .van-empty__image img, /deep/ .van-empty__image {
    width: 100px;
    height: 60px;
  }
  *{
    margin: 0;
    padding: 0;
  }
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    font-family: "PingFang SC";
    overflow: hidden;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
    position: sticky;
    top: 0;
  }
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    justify-content: center;
  }
  .div:nth-child(3) {
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .side{
    color: #1da4f2;
  }
  .tabs{
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
    background: #FFFFFF;
    /*border-bottom: 1px solid #E5E5E5;*/
    overflow: hidden;
  }
  .select{
    color: #fff;
    background: #1da4f2;
  }
  .tabs ul{
    display: flex;
  }
  .tabs li{
    width: 90px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tabs li:nth-child(1){
    border: 2px solid #1da4f2;
    border-radius: 5px 0 0 5px;
  }
  .tabs li:nth-child(2){
    border: 2px solid #1da4f2;
    border-left:none;
    border-radius: 0px 5px 5px 0px;
  }
  .search {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    overflow: hidden;
  }
  /*搜索*/
  /deep/ .van-search{
    width: 92%;
  }
  /deep/ .van-field__control{
    padding-left: 10px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 15px;
  }
  /deep/ .van-icon-search::before {
    content: '\F0AF';
    padding-left: 10px;
  }
  .sousuo{
    margin-left: 10px;
    color: #1DA4F2;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .content{
    width: 100%;
    background: #FFFFFF;
    overflow: auto;
  }
  .contentSelectDiv{
    height: 200px !important;
  }
  .content ul,
  .selectContent ul
  {
    overflow: auto;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #E5E5E5;
  }
  .seleHeader{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    position: sticky;
    top: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
  }
  .seleHeader a{
    width: 2px;
    height: 15px;
    background: #1da4f2;
    margin: 0 5px 0 15px;
  }
  .content ul li,
  .selectContent ul li{
    display: flex;
    align-items: center;
    text-align: left;
  }
  p{
    width: 100%;
    text-align: left;
  }
  .content img:nth-child(1),
  .selectContent img:nth-child(1)
  {
    width: 30px;
    height: 30px;
    margin-right: 3vw;
  }
  .content .subjectSel,
  .selectContent .subjectSel{
    width: 6vw !important;
    height: 6vw !important;
    /*margin-right: 2vw;*/
  }
  .content li:nth-child(2),
  .selectContent li:nth-child(2)
  {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 90%;
    margin-right: 11vw;
    font-size: 15px;
    color: #333;
  }
  /*  搜索栏*/
  .selectContent{
    margin-top: 10px;
    box-sizing: border-box;
    background: #FFFFFF;
    overflow: auto;
  }
  /deep/ .van-dialog__header--isolated{
    padding: 24px 10px;
  }
  .menu{
    width: 100%;
    height: 60px;
    background: #1DA4F2;
    box-shadow: 0px 1px 0px 0px #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
  }
  /*/ 选择框 开始样式/*/
  /deep/ .el-steps--horizontal{
    width: 105%;
  }
  /deep/ .el-step.is-center .el-step__description{
    padding: 0;
  }
  /deep/ .el-step__description{
    margin: 0;
    font-size: 13px;
  }
  /deep/ .el-step__icon{
    width: auto;
    height: auto;
  }
  /deep/ .el-step__icon.is-text{
    border: none;
  }
  /deep/ .is-finish,
  /deep/ .el-step__description.is-process{
    color: #fff;
  }
  /deep/ .el-step__description.is-finish{
    color: white !important;
  }
  /deep/ .el-step__description.is-wait{
    color: rgba(255, 255, 255, 0.7);
  }
  /deep/ .el-step__head.is-finish{
    border-color: #fff;
  }
  /deep/ .el-step__head.is-wait{
    border-color: transparent !important;
  }
  /deep/ .el-step__line{
    border-color: transparent !important;
  }
  /deep/ .el-step.is-horizontal .el-step__line{
    height: 1px;
    /*top:7px;*/
    top: 35%;
  }
  /deep/ .el-step__line{
    background: white;
  }
  /*/ 选择框 结束样式/*/

  .peopletitle{
    width: 92%;
    height: 50px;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    color: white;
    margin: 10px auto 5px auto;
    border-radius: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .peopletitle span{
    margin-left: 5px;
  }
  .peopletitle img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
</style>
